<div id="alignment-eval-content">
    <section id="alignment-eval">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8">
            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Prompt-Video Alignment Evaluation</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-6">Streamlined 2-step process: Load inputs to automatically create pairs, then start evaluation.</p>
            
            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6 border border-gray-200 dark:border-gray-600">
                <h4 class="font-semibold text-gray-900 dark:text-gray-200 mb-3">Step 1: Load Prompts and Videos (Auto-Pairing)</h4>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Prompts (Upload .txt/.csv or Paste Semicolon-Separated List)</label>
                        <input type="file" accept=".csv,.txt" id="prompts-csv-input" class="w-full text-sm text-gray-600 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-white dark:file:bg-gray-600 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 file:text-gray-700 dark:file:text-gray-200 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800">
                        <textarea id="prompts-text-input" rows="2" class="mt-2 w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="A lion roaring; A bird flying..."></textarea>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Videos (Select local files OR paste URLs, one per line)</label>
                        <input type="file" accept="video/*" multiple id="batch-videos-input" class="w-full text-sm text-gray-600 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-white dark:file:bg-gray-600 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 file:text-gray-700 dark:file:text-gray-200 border border-gray-200 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800">
                        <p class="text-center text-xs text-gray-500 dark:text-gray-400 my-2 font-semibold">OR</p>
                        <textarea id="videos-url-input" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="https://storage.googleapis.com/bucket/video1.mp4&#10;https://example.com/video2.webm..."></textarea>
                    </div>
                    
                    <div class="flex gap-4 pt-2">
                        <button id="load-and-pair-btn" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg font-semibold hover:bg-indigo-700">Load & Create Pairs</button>
                        <button id="clear-all-btn" class="flex-1 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-2 px-4 rounded-lg font-semibold hover:bg-gray-300 dark:hover:bg-gray-500">Clear All</button>
                    </div>
                </div>
            </div>
            
            <!-- Optional reordering (only shown for multiple pairs) -->
            <div id="reorder-section" class="hidden">
                <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4 mb-6">
                    <div class="flex items-center gap-2 text-blue-800 dark:text-blue-200 mb-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <h4 class="font-semibold">Optional: Reorder Before Evaluation</h4>
                    </div>
                    <p class="text-sm text-blue-700 dark:text-blue-300">Pairs have been created automatically. Drag items below to reorder if needed. The first prompt pairs with the first video, and so on.</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- Prompts column -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-4">
                        <h5 class="font-semibold text-gray-900 dark:text-gray-200 mb-3 flex items-center gap-2">
                            Prompts 
                            <span class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                </svg>
                                Drag to reorder
                            </span>
                        </h5>
                        <div id="prompts-list" class="space-y-2 min-h-[100px]"></div>
                    </div>
                    
                    <!-- Videos column -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 p-4">
                        <h5 class="font-semibold text-gray-900 dark:text-gray-200 mb-3 flex items-center gap-2">
                            Videos 
                            <span class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
                                </svg>
                                Drag to reorder
                            </span>
                        </h5>
                        <div id="videos-list" class="space-y-2 min-h-[100px]"></div>
                    </div>
                </div>
            </div>
            
            <!-- Pairs preview -->
            <div id="alignment-pairs-container" class="space-y-2"></div>

            <!-- Step 2: Start evaluation -->
            <div id="eval-actions-container" class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6 hidden">
                <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-lg p-4 mb-4">
                    <div class="flex items-center gap-2 text-green-800 dark:text-green-200 mb-1">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <h4 class="font-semibold">Step 2: Start Evaluation</h4>
                    </div>
                    <p class="text-sm text-green-700 dark:text-green-300">Video pairs loaded. Start evaluation to assess how well each video matches its prompt.</p>
                </div>
                
                <button id="start-alignment-eval-btn" class="w-full flex items-center justify-center bg-cyan-600 text-white py-3 px-4 rounded-lg font-bold hover:bg-cyan-700">
                    Start Evaluation
                </button>
            </div>

            <div id="alignment-results-container" class="mt-8 space-y-6 hidden"></div>
            <div id="download-alignment-results-container" class="mt-8 text-center hidden">
                <button id="download-alignment-results-btn" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700">
                    Download Detailed Results (CSV)
                </button>
            </div>
        </div>
    </section>
</div>